<template>
  <div class="db-menu">
    <div class="top">
      <h3>
        数据库
        <div class="fr" size="small">
          <Dropdown @on-click="setLink">
            <Button icon="ios-arrow-down" title="切换连接" size="small"></Button>
            <DropdownMenu slot="list">
              <DropdownItem v-for="li in links" :key="li.id" :name="li.id" :selected="li.id==linkId">{{li.name}} <Tag>{{li.dbType}}</Tag></DropdownItem>             
            </DropdownMenu>
          </Dropdown>
          <Button icon="md-add" to="/set/link" title="链接管理" size="small"></Button>
        </div>
      </h3>
      <Select placeholder="请选择数据库" v-model="database" @on-change="loadTables" clearable>
        <Option v-for="name in dbs" :value="name" :key="name">{{name}}</Option>
      </Select>
      <Input placeholder="快速查询" v-model="keys" clearable>
        <a slot="append" @click="loadTables">
          <Icon type="md-sync" />
        </a>
      </Input>
    </div>
    <div class="tables">
      <ul>
        <li v-for="(t,i) in curTables" :class="{on:t.on}" :key="t.name" @click="loadTable(t)">
          <Icon type="md-cloud-upload" :class="{blue:t.id>0}" />
          {{t.name}}
          <Tooltip theme="light" placement="top" class="fr mr10">
            <Tag>{{t.createTime | time}}</Tag>
            <!-- <Badge size="small" class="fr" color="green" :text="t.createTime | time"> </Badge>          -->
            <div slot="content">
              <p>Id：{{t.id}}</p>
              <p>备注：{{t.note}}</p>
              <p>创建时间：{{t.createTime}}</p>
              <p>修改时间：{{t.editTime}}</p>
              <p>记 录 数：{{t.count}}</p>
            </div>
          </Tooltip>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      dbs: [],
      linkId:0,
      database: "",
      keys: "",
      dto: {
        databaseName: "",
        title: "",
        name: "",
        type: 0,
        exist: false,
        count: 0,
        note: ""
      },
      list: [],
      tables: [],
      links:[]
    };
  },
  created() {
    this.database = this.$u.get("database");   
    this.loadLinks();
  },
  methods: {
    loadLinks() {
      this.$http.get("/code/dblink/list", this.entity).then(r => {
        this.links = r;
        if(!this.$u.get("link")&&this.links.length>0){
          this.linkId=this.links[0].id;
          this.setLink(this.linkId)
        }else{          
         this.loadDatabase();
        }
      });
    },
    setLink(id){
      this.linkId=id;
      this.$u.set("link",id);
       this.loadDatabase();    
    },
    loadTables() {
      if (this.$u.isNull(this.database)) {
        this.$Message.error("请选择数据库！");
        return;
      } else {
        this.$u.set("database", this.database);
      }
      (this.dto = {
        databaseName: this.database,
        database: this.database,
        title: "",
        name: "",
        type: 0,
        exist: false,
        count: 0,
        note: ""
      }),
        this.$emit("on-select-database", this.dto);
      this.$http.get("/api/db/getTables/" + this.database).then(r => {
        r.map(u => {
          u.on = false;
        });
        this.tables = r;
      });
    },
    loadDatabase() {
      this.$http.get("/api/db/getDatabase").then(r => {
        this.dbs = r;
        this.loadTables();
      });
    },
    loadTable(table) {
      this.dto.name = table.name;
      this.dto.title = table.title;
      this.dto.databaseName = this.database;
      this.dto.database = this.database;
      this.tables.map(u => {
        u.on = false;
      });
      table.on = true;
      this.$emit("on-select-table", this.dto);
    }
  },
  computed: {
    curTables() {
      return this.tables.filter(u => {
        if (u.name.startsWith("Abp") || u.name.startsWith("__EF")) {
          return false;
        }
        return u.name.indexOf(this.keys) != -1;
      });
    }
  },
  filters: {
    time(v) {
      var t = new Date(v).getTime();
      let dif = new Date().getTime() - t;
      let m = Math.floor(dif / (1000 * 60));
      let h = Math.floor(m / 24);
      let day = Math.floor(h / 24);
      let week = Math.floor(day / 7);
      let month = Math.floor(week / 4);
      let year = Math.floor(year / 12);
      let result = "";
      if (m <= 60) {
        result = m + "分钟";
      } else if (h < 24) {
        result = h + "小时";
      } else if (day < 30) {
        result = day + "天";
      } else if (month < 12) {
        result = month + "月";
      } else {
        result = year + "年";
      }
      return result;
    }
  }
};
</script>